<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../lib/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../font/iconfont.css">
    <link rel="stylesheet" href="../../css/public.css">
    <link rel="stylesheet" href="../../css/orderform/order.css">
    <script src="../../lib/jquery/jquery-3.6.0.min.js"></script>
    <script src="../../lib/session.js"></script>
    <script src="../../javaScript/public.js"></script>
    <script src="../../javaScript/orderform/orderformlist.js"></script>
    <script src="../../lib/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <script src="../../javaScript/orderform/data.js"></script>
</head>
<body>
    <div class="container head">
        <div class="order col-md-8">

        </div>
        <div class="col-md-4 msgbutton">
            <div class="mbutton-blueb out" data-target=".out">
                <span></span>
                <span>发送站内信</span>
            </div>
            <div class="mbutton-blueb re">
                <span></span>
                <span>取消订单</span>
            </div>
            <div class="mbutton-blueb bei">
                <span></span>
                <span>备注信息</span>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="state">

        </div>
    </div>
    <div class="container">
        <div class="msg">
            <div class="col-md-4">
                <div>收货人信息</div>
                <div class="iner">
                    
                </div>
            </div>
            <div class="col-md-4">
                <div>付款信息</div>
                <div class="pler">
                    
                </div>
            </div>
            <div class="col-md-4">
                <div>发票信息</div>
                <div class="fapiao">
                    
                </div>
            </div>
        </div>
    </div>
    <div class="container orderm">
        <span>商品信息</span>
        <table class="orderbiao">
            <thead>
                <tr>
                    <td>商品信息</td>
                    <td>单价</td>
                    <td>数量</td>
                    <td>小计</td>
                    <td>优惠信息</td>
                    <td>实付款</td>
                </tr>
            </thead>
            <tbody class="ordermsg">
            
            </tbody>
        </table>
        <div class="omsg">

        </div>
    </div>
    <div class="modal fade mout" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content mout-content">
            <p><span>站内信标题</span><input class="minput" placeholder="1-15字"></p>
            <p><span>站内信内容</span><textarea class="minput" maxlength="200"></textarea></p>
            <p>
                <button class="mbutton-blue" data-dismiss="modal">确定</button>
                <button class="mbutton-white" data-dismiss="modal">取消</button>
            </p>
        </div>
    </div>
    </div>
    <div class="modal fade mre" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content mout-content">
                <p><span>取消原因</span><select class="minput">
                    <option value="">请选择取消原因</option>
                    <option value="A">取消原因A</option>
                    <option value="B">取消原因B</option>
                </select></p>
                <p><span>取消内容</span><textarea class="minput" maxlength="200"></textarea></p>
                <p>
                    <button class="mbutton-blue mres" data-dismiss="modal">确定</button>
                    <button class="mbutton-white" data-dismiss="modal">取消</button>
                </p>
            </div>
        </div>
        </div>
        <div class="modal fade beizhu" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content bei-content">
                    <textarea class="minput" maxlength="500" placeholder="备注原因">
                    </textarea>
                    <p>
                        <button class="mbutton-blue" data-dismiss="modal">确定</button>
                        <button class="mbutton-white" data-dismiss="modal">取消</button>
                    </p>
                </div>
            </div>
        </div>
        <div class="modal fade remove" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content remove-content">
                    <span>确定删除？</span>
                    <p>
                        <button class="mbutton-blue delr" data-dismiss="modal">确定</button>
                        <button class="mbutton-white" data-dismiss="modal">取消</button>
                    </p>
                </div>
            </div>
        </div>
    <script>
        window.onload=function(){
            $('.out').on('click',function(){
                $('.mout').modal('toggle')
            })
            $('.re').on('click',function(){
                $('.mre').modal('toggle')
            })
            $('.bei').on('click',function(){
                $('.beizhu').modal('toggle')
            })
            $('.mres').on('click',function(){
                $('.state').text('已取消:取消原因为'+$($('.mout-content')[1]).find('p select>option:selected').val())
                for(let i=0;i<data.length;i++){
                    if(data[i].订单号==item.订单号){
                        data[i].订单状态="已取消"
                        break;
                    }
                }
                $('.msgbutton').text('')
                $('.msgbutton').append(`
                <div class="mbutton-blueb dremove">
                <span></span>
                <span>删除订单</span>
                </div>
                <div class="mbutton-blueb bei">
                    <span></span>
                    <span>备注信息</span>
                </div>
                `)
                $('.dremove').on('click',function(){
                    $('.remove').modal('toggle')
                    
                })
                $('.bei').on('click',function(){
                    $('.beizhu').modal('toggle')
                })
                $('.delr').on('click',function(){
                    for(let i=0;i<data.length;i++){
                    if(data[i].订单号==item.订单号){
                        data.splice(i,1)
                        break;
                    }
                }
                location.href='../../html/orderform/orderformlist.html'
                })
            })
            let item = sessionGet('msg')
            $('.order').text("订单号 "+item.订单号)
            $('.state').text(item.订单状态)
            $('.iner').append(`
                    <p><span>收货人:</span><span>${item.收货信息.收货人}</span></p>
                    <p><span>收货地址:</span><span>${item.收货信息.收货地址}</span></p>
                    <p><span>手机号:</span><span>${item.收货信息.手机号}</span></p>
                    <p><span>用户留言:</span><span>${item.用户留言}</span></p>
            `)
            $('.pler').append(`
                    <p><span>付款方式:</span><span>￥${item.付款方式}</span></p>
                    <p><span>商品总额:</span><span>￥${item.订单金额}</span></p>
                    <p><span>运费金额:</span><span>￥8.00</span></p>
                    <p><span>应支付金额:</span><span>￥${item.订单金额-item.商品信息[0].优惠金额}</span></p>
            `)
            $('.fapiao').append(`
                    <p><span>是否需要发票:</span><span>${item.发票信息.是否需要}</span></p>
                    <p><span>发票抬头:</span><span>${item.发票信息.发票抬头}</span></p>
                    <p><span>发票类型:</span><span>${item.发票信息.发票类型}</span></p>
            `)
            for(let i=0;i<item.商品信息.length;i++){
                $('.ordermsg').append(`
                    <tr>
                        <td>
                            <img src="${item.商品信息[i].商品图片}">
                            <span>
                            <p>${item.商品信息[i].商品名}</p>
                            ${item.商品信息[i].商品规格} ${item.商品信息[i].颜色} ${item.商品信息[i].尺寸} ${item.商品信息[i].款式}
                            <span>
                        </td>
                        <td>
                            ￥${item.商品信息[i].金额}
                        </td>
                        <td>
                            ￥${item.商品信息[i].数量}
                        </td>
                        <td>
                            ￥${item.商品信息[i].金额*item.商品信息[i].数量}
                        </td>
                        <td>
                            ￥${item.商品信息[i].优惠金额}
                        </td>
                        <td>
                            ￥${item.商品信息[i].金额*item.商品信息[i].数量-item.商品信息[i].优惠金额}
                        </td>
                    </tr>
                `)
            }
            $('.omsg').append(`
                <p><span>订单金额:</span><span>￥${item.订单金额}</span></p>
                    <p><span>优惠金额:</span><span>￥${item.商品信息[0].优惠金额}.00</span></p>
                    <p><span>运费:</span><span>￥8.00</span></p>
                    <p><span>应付金额:</span><span￥>${parseInt(item.订单金额)+8}.00</span￥></p>
            `)
        }
    </script>
</body>
</html>